<template>
    <div class="overNotShow">
        <div id="container" />
    </div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader"
import { ref, reactive, onBeforeMount, watch } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import unActiveFloor from '../../../../assets/img/bigScreen/unActiveFloor.png'
import activeFloor from '../../../../assets/img/bigScreen/activeFloor.png'
import floorTitle from '../../../../assets/img/bigScreen/floor-title.png'
import floorContent from '../../../../assets/img/bigScreen/floor-content.png'
import floorShili from '../../../../assets/img/bigScreen/floor-shili.png'
import useBigScreenStore from '@/stores/useBigScreenStore';
const bigScreenStore = useBigScreenStore()

let AmapData = null
let mapData = ref(null)
let markers = []
const areaPointArray = [114.342382, 30.376246]
const initMap = () => {
    // let that = this
    window._AMapSecurityConfig = {
        securityJsCode: '1072dedcda48926d55ed87c1bb31d700'
    }
    AMapLoader.reset() // 先重置，避免报错 "禁止多种API加载方式混用"
    AMapLoader.load({
        key: 'f5d62248589564702151648ba28ab4a9', // 申请好的Web端开发者Key，首次调用 load 时必填
        // version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
        .then((AMap) => {
            AmapData = AMap
            mapData.value = new AMap.Map("container", {
                // 设置地图容器id
                pitch: 38,
                viewMode: "3D", // 是否为3D地图模式
                terrain: true, // 开启地形图
                zoom: 17, // 初始化地图级别
                center: areaPointArray, // 初始化地图中心点位置
                mapStyle: "amap://styles/darkblue",
                showLabel: false //不显示地图文字标记
            })
            //   that.addGeoJson()
            mapData.value.on("complete", () => {
                // 加载完成地图
                // that.createMarkerCluster(AMap).then(() => {
                //   // 首次加载 先加载完成 getRoadsideEquipment
                //   that.getRoadsideEquipment()
                // })

                getAllBuilding()

            })
            mapData.value.on("zoomend", () => {
                // 加载完成地图
                // if (markerCluster) that.$set(that, "routeEuInfo", {})
            })
            mapData.value.on("click", function (e) {
                // 点击地图 关闭所有弹窗
                // that.closeInfoWindow()
            })
            // 防止弹窗跑偏的问题，延迟加载车辆图标
            //   setTimeout(() => {
            //     that.createMarker(AmapData, mapData)
            //     this.markerSiteData.forEach((item) => {
            //       this.createSlogMarKer(AmapData, mapData, item, 1)
            //     })
            //     this.markerSlogData.forEach((item) => {
            //       this.createSlogMarKer(AmapData, mapData, item, 2)
            //     })
            //   }, 300)
            // mapData.setFitView() // 注释了，避免地图缩小
        })
        .catch((e) => {
            // 防止地图报错，从新加载页面
            // location.reload()
            ElMessage.error('地图加载失败')
        })
}
const getAllBuilding = (campusId = '') => {
    // EsAjax.post(ApiUrls.getAllBuilding, { campusId }).then(res => {
    //     if (res.data.code === 200) {
    //         if (markers.length > 0) {
    //             mapData.remove(markers)
    //         }
    //         bigScreenStore.floorId = res.data.data[0].id
    //         res.data.data.forEach(element => {
    //             createFloorMarker(AmapData, mapData, element)

    //         });
    //     }
    // })

    mapData.value.remove(markers)
    markers = []
    bigScreenStore.floorList.forEach(element => {
        createFloorMarker(AmapData, mapData.value, element)
    });
    var defaultIcon = new AMap.Icon({
        image: activeFloor,
        size: new AMap.Size(95, 138), //图标大小
        imageSize: new AMap.Size(95, 138)
    });
    for (var i = 0; i < markers.length; i++) {
        markers[0].setIcon(defaultIcon);
    }
}
// 创建标记
const createFloorMarker = (AMap, map, element) => {
    // mapData.value.remove(markers)
    var marker = new AMap.Marker({
        title: element.name, // 此属性非绘制文字内容，仅最为标识使用
        position: [element.lon, element.lat],
        zIndex: 1001,
        icon: unActiveFloor,
        anchor: "center"
    })
    mapData.value.add(marker)
    markers.push(marker)
    var defaultIcon = new AMap.Icon({
        image: activeFloor,
        size: new AMap.Size(95, 138), //图标大小
        imageSize: new AMap.Size(95, 138)
    });
    // for (var i = 0; i < markers.length; i++) {
    //     console.log(markers);
    //     markers[0].setIcon(defaultIcon);
    // }
    marker.setLabel({
        offset: new AMap.Pixel(-90, -70),  //设置文本标注偏移量
        content: `<div class='label-info'>${element.name}</div>`, //设置文本标注内容
        direction: 'right' //设置文本标注方位
    });
    marker.on('click', (e) => {
        console.log(bigScreenStore.classInfoList);
        bigScreenStore.setLnglat([e.target.getPosition().lng, e.target.getPosition().lat])
        var infoWindow = new AMap.InfoWindow({
            isCustom: true,
            offset: new AMap.Pixel(165, 220),
            content: `<div style='width:265px;height:315px;background:transparent'>
                <div style='width:100%;height:48px;margin-bottom:5px'>
                    <div style='position:absolute;left:60px;top:15px'>${element.name}</div>
                <img src=${floorTitle} />
                </div >
                <div style='width:100%;height:260px'>
                    <div style='position:absolute;left:10px;top:60px'>
                        <img src=${floorShili} />
                        </div>
                        <div style='width: 85.5%;height: 76px;background: rgba(1, 11, 23, .6);position:absolute;left:10px;top:205px;padding:10px'>
                            <div style='display: flex;justify-content: space-between; margin-bottom:8px'>
                            <div>教室数量</div>    
                            <div style='color:#01FEF3'>${bigScreenStore.classInfoList[0].roomNum}</div>    
                            </div>

                            <div style='display: flex;justify-content: space-between;margin-bottom:8px'>
                            <div>使用数</div>    
                            <div style='color:#00B1FF'>${bigScreenStore.classInfoList[0].used}</div>    
                            </div>

                            <div style='display: flex;justify-content: space-between;'>
                            <div>当前使用率</div>    
                            <div style='color:#FF9600'>${Number((bigScreenStore.classInfoList[0].used / bigScreenStore.classInfoList[0].roomNum) * 100)}%</div>    
                            </div>
                            </div>
                <img src=${floorContent} />
                
                </div >
                </div > `  //使用默认信息窗体框样式，显示信息内容
        });
        infoWindow.open(mapData.value, e.target.getPosition());
        bigScreenStore.floorId = element.id
        console.log(bigScreenStore.floorId);
        for (var i = 0; i < markers.length; i++) {
            var preIcon = new AMap.Icon({
                image: unActiveFloor,
                size: new AMap.Size(72, 92), //图标大小
                imageSize: new AMap.Size(72, 92)
            });
            markers[i].setIcon(preIcon);
            markers[i].setLabel({
                offset: new AMap.Pixel(-90, -70),  //设置文本标注偏移量
                content: `<div class='label-info'>${markers[i].getTitle()}</div>`, //设置文本标注内容
                direction: 'right' //设置文本标注方位
            });
        }
        // var clickIcon = new AMap.Icon({
        //     image: activeFloor,
        //     size: new AMap.Size(95, 138), //图标大小
        //     imageSize: new AMap.Size(95, 138)
        // });
        e.target.setIcon(defaultIcon);
        e.target.setLabel({
            offset: new AMap.Pixel(-90, -70),  //设置文本标注偏移量
            content: `<div class='remove-info'></div>`, //设置文本标注内容
            direction: 'right' //设置文本标注方位
        });


    })

}
// watch(bigScreenStore, (n, o) => {
//     mapData.value.setZoomAndCenter(17, n.lonlat);
//     console.log(n.campusId, o.campusId);
//     if (n.campusId != o.campusId) {
//         getAllBuilding()
//     }

// })
watch(() => [bigScreenStore.lonlat, bigScreenStore.campusId], ([nLon, nCam], [oLon, oCam]) => {
    // console.log(n, o);
    mapData.value.setZoomAndCenter(17, nLon);
    if (nCam != oCam) {
        getAllBuilding()
    }
})

onBeforeMount(() => {
    initMap()
})
</script>

<style scoped lang="less">
#container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    z-index: 3;
    // background: rgba(0, 0, 0, 1);
}

:deep(.amap-marker-label) {
    background: transparent;
    border: 0px;
    color: #67D0FF;
    font-size: 16px;
    font-weight: 500;

}

.overNotShow {
    width: 78%;
    position: absolute;
    left: 11%;
}
</style>
<style lang="scss"></style>
